<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="票货信息" name="1">
				<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="组织" prop="companyId" class="top">
								<el-select
									v-model="formData.companyId"
									v-selecttext="formData.companyName,compData,'companyId'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in compData"
										:key="item.companyId"
										:label="item.companyName"
										:value="item.companyId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="船名航次" prop="shipvoyageId" class="top">
								<el-select
									v-model="formData.shipvoyageId"
									v-selecttext="formData.shipvoyageName,shipVoyageData,'shipvoyageId'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in shipVoyageData"
										:key="item.shipvoyageId"
										:label="item.shipvoyageName"
										:value="item.shipvoyageId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货主" prop="cargoOwnerId" class="top">
								<el-select
									v-model="formData.cargoOwnerId"
									v-selecttext="formData.cargoOwnerName,customerData,'customerId','customerName'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in customerData"
										:key="item.customerId"
										:label="item.customerName"
										:value="item.customerId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货代" prop="cargoAgentId" class="top">
								<el-select
									v-model="formData.cargoAgentId"
									v-selecttext="formData.cargoAgentName,customerData,'customerId','customerName'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in customerData"
										:key="item.customerId"
										:label="item.customerName"
										:value="item.customerId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货名" prop="cargoCode" class="top">
								<el-select
									v-model="formData.cargoCode"
									v-selecttext="formData.cargoName,cargoData,'cargoCode'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in cargoData"
										:key="item.cargoCode"
										:label="item.cargoName"
										:value="item.cargoCode"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="贸别" prop="tradeType" class="top">
								<el-select
									v-model="formData.tradeType"
									v-selecttext="formData.tradeName,tradeData,'tradeType'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in tradeData"
										:key="item.tradeType"
										:label="item.tradeName"
										:value="item.tradeType"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="包装" prop="packing" class="top">
								<el-select
									v-model="formData.packing"
									v-selecttext="formData.packingName,packingData,'packing'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in packingData"
										:key="item.packing"
										:label="item.packingName"
										:value="item.packing"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="开证公司" prop="issuingCompanyId" class="top">
								<el-select
									v-model="formData.issuingCompanyId"
									v-selecttext="formData.issuingCompanyName,customerData,'issuingCompanyId'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in customerData"
										:key="item.customerId"
										:label="item.customerName"
										:value="item.customerId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'

export default {
  name: 'detail',
  components: { BaseTable },
  props: {
    shipVoyageData: {
      type: Array
    },
    compData: {
      type: Array
    },
    customerData: {
      type: Array
    },
    cargoData: {
      type: Array
    }

  },
  data() {
    return {
      activeNames: ['1', '2'],
      formData: { 'companyId': '', 'companyName': '', 'shipvoyageName': '', 'cargoOwnerName': '', 'cargoAgentName': '', 'cargoName': '', 'tradeName': '', 'packingName': '', 'issuingCompanyName': '', 'shipvoyageId': '', 'cargoOwnerId': '', 'cargoAgentId': '', 'cargoCode': '', 'tradeType': '', 'packing': '', 'issuingCompanyId': '' },
      fileList: [],
      tradeData: [
        { tradeName: '内贸', tradeType: '内贸' },
        { tradeName: '外贸', tradeType: '外贸' }
      ],
      packingData: [
        { packingName: '散', packing: 1 },
        { packingName: '件', packing: 2 }
      ],
      rules: {
        companyId: [
          { required: true, message: '请选择组织', trigger: 'change' }
        ],
        cargoOwnerId: [
          { required: true, message: '请选择货主', trigger: 'change' }
        ],
        cargoAgentId: [
          { required: true, message: '请选择货代', trigger: 'change' }
        ],
        cargoCode: [
          { required: true, message: '请选择货名', trigger: 'change' }
        ],
        tradeType: [
          { required: true, message: '请选择贸别', trigger: 'change' }
        ],
        packing: [
          { required: true, message: '请选择包装', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    // this.formData = value
    // this.getProcessList('')
  },
  methods: {
    /**
		 * 上传附件
		 */
    upload(file) {
      console.log(file, 'file')
      const formData = new FormData()
      formData.append('file', file.file)
      //   api.uploadD(formData).then(response => {
      //     if (response.code === '00000000') {
      //       this.$message({
      //         message: response.data,
      //         type: 'success'
      //       });
      //       this.getEdiHc().then(res => {
      //         this.getEdiJx(this.ediData[0].id)
      //       })
      //     }
      //   })
    },
    /**
     * 按钮事件
     */
    buttonClick(i) {
      i()()
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";

[v-cloak] {
	display: none;
}
</style>
